@import '../../../style/common/index.less';

@btn-prefix-cls: ~'dt-btn';
@btn-transition-time: 0.3s;
@btn-border-width: 1px;
@btn-border-style: solid;
@btn-default-bg: @white-main;
@btn-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
@btn-noStyle-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
@btn-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);

@btn-height-small: @font-size-base * 1.5;
@btn-height-default: @font-size-base * 1.875;
@btn-height-large: @font-size-base * 2.25;

@btn-font-small: @font-size-base * 0.75;
@btn-font-default: @font-size-base * 0.875;
@btn-font-large: @font-size-base;

@btn-padding-small: @space-2 calc(@space-2 * 3);
@btn-padding-default: @space-4 calc(@space-2 * 10);
@btn-padding-large: @space-4 calc(@space-2 * 14);

@btn-line-small: @line-height-base;
@btn-line-default: @line-height-base;
@btn-line-large: @line-height-lg;

@btn-disable-color: @gray-3;
@btn-disable-bg: @white-1;
@btn-disable-border: @gray-5;

@btn-ghost-color: @white-1;
@btn-ghost-bg: transparent;
@btn-ghost-border: @white-1;
@btn-ghost-dis-color: #00000040;

@btn-icon-margin: @space-8;

@btn-loading-border-width: 2px;
@btn-loading-height: @btn-height-small - 12px;
@btn-loading-icon-padding: @btn-icon-margin;

.btn {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  text-align: center;
  background-image: none;
  border: @btn-border-width @btn-border-style transparent;
  border-radius: 2px;
  box-shadow: @btn-shadow;
  cursor: pointer;
  transition: all @btn-transition-time cubic-bezier(0.645, 0.045, 0.355, 1);
  user-select: none;
  touch-action: manipulation;
  .btn-disabled();
  .btn-ghost();
  .btn-loading();
}

.btn-clear {
  border: none;
  box-shadow: none;
}

.btn-color(@back, @color, @border) {
  color: @color;
  background-color: @back;
  border-color: @border;
}

.btn-size(@height: @btn-height-default, @font: @btn-font-default, @padding: @btn-padding-default, @line-height: @btn-line-default) {
  height: @height;
  padding: @padding;
  font-size: @font;
  line-height: @line-height;
}

.btn-disabled(@background: @btn-disable-bg; @color: @btn-disable-color; @border: @btn-disable-border) {
  &[disabled] {
    &,
    &:hover,
    &:focus,
    &:active {
      .btn-color(@background; @color; @border);
      text-shadow: none;
      box-shadow: none;
      cursor: no-drop;
    }
  }
}

.btn-ghost(@color: @btn-ghost-color, @border: @btn-ghost-border) {
  &.@{btn-prefix-cls}-background-ghost {
    .btn-color(@btn-ghost-bg; @color; @border);
    .btn-loading(@color);
    text-shadow: none;

    &:hover,
    &:focus {
      .btn-color(@btn-ghost-bg; @info-hover; @info-hover);
      .btn-loading(@info-hover);
    }

    &:active {
      .btn-color(@btn-ghost-bg; @info-active; @info-active);
      .btn-loading(@info-active);
    }

    &&[disabled] {
      color: @btn-ghost-dis-color;
      background-color: @btn-ghost-bg;
      border-color: @btn-disable-border;
    }
  }
}

.btn-status-ghost(@color, @color-hover, @color-active) {
  .@{btn-prefix-cls}&.@{btn-prefix-cls}-background-ghost {
    .btn-color(@btn-ghost-bg; @color; @color);
    .btn-loading(@color);
    text-shadow: none;

    &:hover,
    &:focus {
      .btn-color(@btn-ghost-bg; @color-hover; @color-hover);
      .btn-loading(@color-hover);
    }

    &:active {
      .btn-color(@btn-ghost-bg; @color-active; @color-active);
      .btn-loading(@color-active);
    }

    &&[disabled] {
      color: @btn-disable-color;
      background-color: @btn-disable-bg;
      border-color: @btn-disable-border;
    }
  }
}

.btn-status (@status) {
  @status-default: ~'@{status}-default';
  @status-hover: ~'@{status}-hover';
  @status-active: ~'@{status}-active';
  @status-disabled: ~'@{status}-disable';

  &:not(.@{btn-prefix-cls}-primary):not(.@{btn-prefix-cls}-text) {
    .btn-color(@btn-default-bg, @@status-default, @@status-default);

    &:hover,
    &:focus {
      .btn-color(@btn-default-bg, @@status-hover, @@status-hover);
      .btn-loading(@@status-hover);
    }

    &:active {
      .btn-color(@btn-default-bg, @@status-active, @@status-active);
      .btn-loading(@@status-active);
    }

    .btn-disabled(@btn-default-bg, @@status-disabled, @@status-disabled);
    .btn-loading(@@status-default);

    &&[disabled] {
      &.@{btn-prefix-cls}-loading > .@{btn-prefix-cls}-loading-icon > * {
        &:nth-of-type(1),
        &:nth-of-type(2) {
          border-top-color: @@status-disabled;
        }
      }
    }
  }

  &.@{btn-prefix-cls}-primary {
    .btn-color(@@status-default, @white-main, @@status-default);

    &:hover,
    &:focus {
      .btn-color(@@status-hover, @white-main, @@status-hover);
    }

    &:active {
      .btn-color(@@status-active, @white-main, @@status-active);
    }

    &&[disabled] {
      color: @white-main;
      background-color: @@status-disabled;
      border-color: @@status-disabled;
    }
  }

  &.@{btn-prefix-cls}-text {
    .btn-color(@btn-default-bg, @@status-default, @@status-default);

    &:hover,
    &:focus {
      .btn-color(@white-3, @@status-default, @gray-4);
    }

    &:active {
      .btn-color(@white-3, @@status-active, @gray-4);
      .btn-loading(@@status-active);
    }

    .btn-loading(@@status-default);

    &&[disabled] {
      color: @@status-disabled;
      background-color: @white-main;

      &.@{btn-prefix-cls}-loading > .@{btn-prefix-cls}-loading-icon > * {
        &:nth-of-type(1),
        &:nth-of-type(2) {
          border-top-color: @@status-disabled;
        }
      }
    }
  }

  &[dt-btn-click-animating='true']::after {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    border-radius: inherit;
    animation: dtBtnInsetStatus 0.36s ease-in;
    animation-fill-mode: both;
    content: '';
    inset: -1px;
  }

  @keyframes dtBtnInsetStatus {
    0% {
      box-shadow: 0 0 0 0px @@status-active;
      opacity: 0.7;
    }

    100% {
      box-shadow: 0 0 0 6px #eee;
      opacity: 0;
    }
  }

  .btn-status-ghost(@@status-default, @@status-hover, @@status-active);
}

.btn-loading-icon(@btn-icon-color) {
  position: absolute;
  top: 0;
  left: 0;
  width: @btn-loading-height;
  height: @btn-loading-height;
  border: @btn-loading-border-width solid transparent;
  border-top: @btn-loading-border-width solid @btn-icon-color;

  border-radius: 100%;

  &.@{btn-prefix-cls}-icon-middle {
    width: @btn-loading-height - 1px;
    height: @btn-loading-height - 1px;
  }

  &.@{btn-prefix-cls}-icon-small {
    width: @btn-loading-height - 4px;
    height: @btn-loading-height - 4px;
  }
}

.btn-loading(@btn-icon-color: #333) {
  @keyframes loading-first {
    0% {
      transform: rotate(0);
    }

    50% {
      transform: rotate(100deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes loading-second {
    0% {
      transform: rotate(180deg);
    }

    50% {
      transform: rotate(280deg);
    }

    100% {
      transform: rotate(540deg);
    }
  }

  &.@{btn-prefix-cls}-loading {
    &:not(.@{btn-prefix-cls}-disabled) {
      cursor: wait;
    }

    &:not(.@{btn-prefix-cls}-only-icon) {
      > span:nth-of-type(2) {
        padding-left: @btn-loading-icon-padding;
      }

      &.@{btn-prefix-cls}-large > span:nth-of-type(2) {
        padding-left: @btn-loading-icon-padding + 5px;
      }

      &.@{btn-prefix-cls}-small > span:nth-of-type(2) {
        padding-left: @btn-loading-icon-padding - 5px;
      }
    }

    .@{btn-prefix-cls}-loading-icon {
      position: relative;
      width: @btn-loading-height + (@btn-loading-border-width * 2);
      height: @btn-loading-height + (@btn-loading-border-width * 2);
      margin-top: 0.35px;
      vertical-align: text-top;

      span {
        margin-top: 0.3px;
        transition: all @btn-transition-time cubic-bezier(0.645, 0.045, 0.355, 1);

        &:first-of-type {
          .btn-loading-icon(@btn-icon-color);
          animation: loading-first 1.2s linear infinite;
        }

        &:last-of-type {
          .btn-loading-icon(@btn-icon-color);
          transform: rotate(180deg);
          animation: loading-second 1.2s linear infinite;
        }
      }
    }
  }
}

.btn-animation(@borderColor) {
  &[dt-btn-click-animating='true']::after {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    border-radius: inherit;
    animation: dtBtnInset 0.36s ease-in;
    animation-fill-mode: both;
    content: '';
    inset: -1px;
  }

  @keyframes dtBtnInset {
    0% {
      box-shadow: 0 0 0 0px @borderColor;
      opacity: 0.7;
    }

    100% {
      box-shadow: 0 0 0 6px #eee;
      opacity: 0;
    }
  }
}
